<template>
    <div>
        <common-header></common-header>
        <main v-if="detail">
            <div class="detail_header">
                <div class="con_box">
                    <div class="top">
                        <div class="detail_title">
                            <img src="/static/images/detail_title.png" alt="">
                            <div class="title">双带头工作室</div>
                        </div>
                    </div>
                    <div class="position">
                        <img src="/static/images/addr1.png" alt="">
                        <span>您现在的位置：</span>
                        <a href="#/">首页></a>
                        <a href="#/work">双带头工作室></a>
                        <a :href="url">{{name+'>'}}</a>
                        <span class="now">{{detail&&detail.title}}</span>
                    </div>
                </div>
            </div>
            <div class="con_box">
                <div class="user_con">
                    <div class="user_img">
                        <img :src="detail.image" alt="">
                        <div class="mb">
                            <img src="/static/images/prebg.png" alt="">
                        </div>
                    </div>
                    <div class="user_info">
                        <div class="user_title">
                            <div class="user_name">
                               {{detail.title}}
                            </div>
                            <div class="work">{{detail.identity}}</div>
                        </div>
                        <div class="item">
                            <div class="i_title">所属支部：</div>
                            <div class="i_value">{{detail.department}}</div>
                        </div>
                        <div class="item">
                            <div class="i_title">所在学院：</div>
                            <div class="i_value">{{detail.college}}</div>
                        </div>
                        <div class="item">
                            <div class="i_title">职位：</div>
                            <div class="i_value">{{detail.position}}</div>
                        </div>
                    </div>
                </div>
                <div class="sort">
                    <div class="sort_item " @click="change(1)" :class="type==1?'sort_active':''">
                        <a href="javascript:;">个人简介</a>
                    </div>
                    <div class="sort_item" @click="change(2)" :class="type==2?'sort_active':''">
                        <a href="javascript:;">人物事迹</a>
                    </div>
                </div>
                <div class="txt_box" v-if="type ==1">
                    {{detail.intr}}
                </div>
                <div class="txt_box" v-if="type ==2">
                    {{detail.deeds}}
                </div>
            </div>
        </main>
        <common-footer type="2"></common-footer>
    </div>
</template>
<script>
import CommonHeader from '@/components/commonheader'
import CommonFooter from '@/components/commonfooter'
import CommonBanner from '@/components/commonBanner'
import commonNav from '@/components/commonNav'
export default {
    data(){
        return{
            detail:null,
            name:'',
            url:'',
            list:[],
            prev:null,
            next:null,
            detailid:'',
            type:1
        }
    },
    created(){
        console.log(this.$route.query)
        this.name = this.$route.query.name
        this.url = this.$route.hash
        this.detailid = this.$route.query.id
        this.getdata(this.$route.query.id)
        
    },
    mounted(){

    },
    watch:{
        $route:{
            handler(newval,oldval){
                if(newval){
                    this.detailid = newval.query.id
                    this.getdata(newval.query.id)
                }
            },
            deep:true
        }
    },
    methods:{
        change(type){
            this.type = type
        },
        getdata(id){
            this.$api.post('getExampleInfo',{
                id:id
            }).then(res=>{
                console.log(res)
                if(res.code === 200){
                    this.detail = res.data.data
                }else{
                    alert(res.message)
                    this.$router.go(-1)
                }
                
            })
        }
    },
    components:{
        CommonBanner,
        CommonFooter,
        CommonHeader,
        commonNav
    }
}
</script>
<style lang="scss" scoped>
 @import  '@/assets/css/common.scss';
.con_box{
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 50px;
}
</style>